<template>
  <div class="mapbj cursor">
    <img src="@/assets/img/home/longwan.png" width="561" height="606" usemap="#Map" border="0" style="width: 35.0625rem; height: 37.875rem;" />
    <map name="Map" id="Map">
      <!-- 蒲州街道 -->
      <div class="puzhou map_icon" @click="switchMaptwo(1, '蒲州街道','330303002000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area
          shape="poly"
          coords="100,11,107,18,104,30,106,44,108,58,113,65,118,71,128,80,128,89,126,99,124,115,121,129,114,145,103,158,85,162,69,156,68,134,63,117,57,105,54,90,35,82,17,74,12,65,13,50,26,39,47,40,65,41,81,27,87,13"
        />
      </div>
      <!-- 状元街道 -->
      <div class="zhuangyuan map_icon" @click="switchMaptwo(2, '状元街道','330303006000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area
          shape="poly"
          coords="131,81,145,89,155,97,169,103,182,109,195,114,211,119,229,124,227,134,224,144,220,153,212,163,202,176,193,186,182,195,172,206,159,214,143,224,128,230,113,236,96,239,80,240,66,234,61,224,55,213,49,204,42,197,46,183,58,169,68,160,75,164,86,165,94,165,104,161,113,154,118,142,123,132,126,118,129,95"
        />
      </div>
      <!-- 瑶溪街道 -->
      <div class="yaoxi map_icon" @click="switchMaptwo(3, '瑶溪街道','330303007000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area
          shape="poly"
          coords="121,238,129,252,137,274,125,289,115,309,114,329,125,346,133,353,156,338,174,325,193,312,210,301,236,289,253,276,266,254,271,229,278,211,287,194,298,184,312,177,323,179,333,186,343,195,350,206,355,213,364,224,371,238,382,252,393,261,417,261,427,247,436,235,441,226,448,209,431,190,396,171,369,152,330,137,301,128,259,127,232,126,231,136,223,156,210,176,195,192,172,209,151,224,136,231"
        />
      </div>
      <!-- 永中街道 -->
      <div class="yongzhong map_icon" @click="switchMaptwo(4, '永中街道','330303001000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area
          shape="poly"
          coords="136,360,143,372,147,384,147,402,146,419,148,437,165,446,179,448,196,450,224,458,256,467,266,468,287,457,308,440,324,420,331,405,335,391,342,393,345,397,353,389,373,363,395,339,415,307,418,283,413,271,394,270,380,257,368,242,356,220,346,208,336,192,323,182,312,182,294,192,282,210,274,231,271,254,260,278,242,291,219,304,204,313,186,325,169,337,151,348"
        />
      </div>
      <!-- 海滨街道 -->
      <div class="haibin map_icon" @click="switchMaptwo(5, '海滨街道','330303003000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area
          shape="poly"
          coords="456,211,449,225,443,241,434,256,426,264,419,269,421,274,423,282,423,293,423,304,416,318,406,332,398,344,400,357,406,374,413,388,423,401,433,410,449,417,471,418,494,417,516,416,526,414,540,411,546,416,552,434,551,416,536,405,524,400,514,391,517,377,522,361,527,340,533,325,536,306,537,287,533,271,516,251,496,234,474,223"
        />
      </div>
      <!-- 永兴街道 -->
      <div class="yongxing map_icon" @click="switchMaptwo(6, '永兴街道','330303004000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area
          shape="poly"
          coords="392,351,389,358,349,407,366,440,376,467,386,489,393,512,398,529,407,549,414,562,422,579,437,597,454,589,470,573,483,557,495,541,511,523,508,522,523,504,531,490,539,475,543,461,547,447,547,431,540,419,524,421,500,422,482,424,461,425,443,424,427,418,414,406,408,395,402,379"
        />
      </div>
    </map>
  </div>
</template>

<script>
export default {
  name: 'MapLongWan',

  data () {
    return {
      qxname: '龙湾区',
      category: false,
      isActive: 1,
      cityThreeType: '8',
      cityThreeTitle: '',
      Hqlrsl: [],
      qxcode: '330303000000'
    }
  },
  mounted () {
    this.handle()
  },
  methods: {
    handle () {
      // 12.获取老人数量(会按照地区自动分类
      this.$http.post(this.$api.Hqlrsl.hqlrsl, this.qxcode, true).then(result => {
        let arr = result.data.response.countTotalRegionDoctor
        // console.log('12.获取老人数量(会按照地区自动分类)', arr);
        for (let val of arr.values()) {
          this.Hqlrsl.push(val.num)
        }
      })
    },
    switchMaptwo (cityThreeType, cityThreeName, cityThreeJdCode) {
      var _this = this
      setTimeout(function () {
        console.log('cityThreeType(Map)' + cityThreeType)
        console.log('cityThreeName(Map)' + cityThreeName)
        _this.$router.push({
          path: '/AreaThreeComponents',
          name: 'AreaThreeComponents',
          query: {
            key: 'key',
            cityThreeTypeKey: cityThreeType,
            cityThreeTitleKey: cityThreeName,
            cityThreeJdCodeKey: cityThreeJdCode,
            cityThreeQxcodeKey: _this.qxcode,
            cityThreeQxnameKey: _this.qxname

          }
        })
      }, 500)
    }
  }
}
</script>

<style lang="scss" scoped>
.mapbj {
  position: absolute;
  top: 3%;
  left: 30%;
  //地图点
  .map_icon {
    color: #214494;
    font-style: italic;:hover{color: #fff;
font-size: 1.375rem; }
    width: 7rem;
    height: 7rem;
    line-height: 2.4rem;
    text-align: center;
    background: url(../../../assets/img/home/2.png) no-repeat center;
    background-size: 100% 100%;
  }
}
.puzhou {
  position: absolute;
  top: 0%;
  right: 74%;
}
.zhuangyuan {
  position: absolute;
  top: 7%;
  right: 61%;
}
.yaoxi {
  position: absolute;
  top: 19%;
  right: 46%;
}
.yongzhong {
  position: absolute;
  top: 36%;
  right: 30%;
}
.haibin {
  position: absolute;
  top: 33%;
  right: 3%;
}
.yongxing {
  position: absolute;
  top: 65%;
  right: 9%;
}
</style>
